<template>
  <!-- draggable:可以设置拖拽 -->
  <!-- before-close:关闭前的回调，会暂停 Dialog 的关闭 -->
  <!-- append-to-body：Dialog自身是否插入至 body 元素上 -->
  <!-- destroy-on-close：当关闭 Dialog 时，销毁其中的元素 -->
  <el-dialog
    v-model="show"
    @close="close"
    :title="updateRow?'修改用户':'新增用户'"
    width="800px"
    draggable
    :before-close="close"
    :append-to-body="true"
    :destroy-on-close="true"
  >
    <template #default>
      <div class="form-container">
        <el-form
          ref="formRef"
          :model="userForm"
          :rules="userRules"
          label-width="90px"
          class="user-editor-form"
        >
          <div class="form-row">
            <el-form-item label="用户名" prop="username" class="inline">
              <el-input v-model="userForm.username" show-word-limit placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password" class="inline" v-if="!userForm.id">
              <el-input v-model="userForm.password" show-word-limit placeholder="请输入用户密码" />
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName" class="inline">
              <el-input v-model="userForm.realName" placeholder="请输入真实姓名" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email" class="inline">
              <el-input v-model="userForm.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="性别" prop="gender" class="inline">
              <el-select v-model="userForm.gender" placeholder="请选择性别">
                <el-option
                  v-for="item in dicts.system_global_gender"
                  :key="item.v"
                  :label="item.k"
                  :value="userForm.gender == item.v ? userForm.gender : item.v"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone" class="inline">
              <el-input v-model="userForm.phone" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="启用状态" prop="enabled" class="inline">
              <el-radio-group v-model="userForm.enabled">
                <el-radio
                  v-for="item in dicts.system_global_status"
                  :key="item.v"
                  :label="userForm.enabled == item.v ? userForm.enabled : item.v"
                  :value="item.v"
                >
                  {{ item.k }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="所属机构" prop="unitId" class="inline">
              <el-tree-select
                class="treeList"
                v-model="userForm.unitId"
                placeholder="请选择所属机构"
                :render-after-expand="false"
                :data="unitTree"
                :props="{ label: 'name' }"
                :check-strictly="true"
                :auto-expand-parent="true"
                :default-expand-all="true"
                node-key="id"
              />
            </el-form-item>
            <el-form-item label="所属岗位" prop="postIds" class="inline">
              <el-tree-select
                class="treeList"
                v-model="userForm.postIds"
                placeholder="请选择所属岗位"
                :render-after-expand="false"
                :data="postTree"
                :props="{ label: 'postName' }"
                :auto-expand-parent="true"
                :default-expand-all="true"
                node-key="id"
                show-checkbox
                multiple
              />
            </el-form-item>
            <el-form-item label="分配角色" prop="roleIds" class="inline">
              <el-tree-select
                class="treeList"
                v-model="userForm.roleIds"
                placeholder="请选择分配角色"
                :render-after-expand="false"
                :data="roleTree"
                :props="{ label: 'roleName' }"
                :auto-expand-parent="true"
                :default-expand-all="true"
                node-key="id"
                show-checkbox
                multiple
              />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="userForm.remark"
                type="textarea"
                placeholder="请输入用户备注"
                :maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </template>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onBeforeMount } from 'vue'
import { postPage, unitList, rolePage, userAdd,userDetail,userUpdate } from './api'
// import { ElMessage, ElMessageBox } from 'element-plus'

// 表单数据
let userForm = reactive({
    id:'',
    username:'',
    password:'',
    realName:'',
    email:'',
    gender:'1',
    phone:'',
    enabled:'1',//状态
    unitId:'',//所属机构默认值
    postIds:'',//所属岗位默认值
    roleIds:'',//分配角色默认值
    remark:'',//备注
})
// 所属机构
const unitTree = ref([])
// 所属岗位
const postTree = ref([])
// 角色列表
const roleTree = ref([])

const props = defineProps({
  show: Boolean,
  updateRow:String
})
const show = ref(props.show)
const updateRow = ref(props.updateRow)

// 生命周期
const { proxy } = getCurrentInstance()
onBeforeMount(async () => {
  // 混入(字典)
  proxy.sendDicts(['system_global_status','system_global_gender'])
  // 机构数据
  let unitRes = await unitList()
  unitTree.value = unitRes.data
  // 岗位数据
  let postRes = await postPage()
  postTree.value = postRes.data.records
  // 角色数据
  let roleRes = await  rolePage()
  roleTree.value = roleRes.data.records

  // 用户详情
  if(updateRow.value){
    let userData = await userDetail(updateRow.value)
    let {id,username,password,realName,email,phone,gender,unitId,remark,enabled} = userData.data.user
    let {roleIds} = userData.data 
    let {postIds} = userData.data
    userForm.id = id
    userForm.username = username
    userForm.password = password
    userForm.realName = realName
    userForm.email = email
    userForm.gender = gender
    userForm.phone = phone
    userForm.enabled = enabled
    userForm.unitId = unitId
    userForm.postIds = postIds
    userForm.roleIds = roleIds
    userForm.remark = remark  
  } 
})

// 关闭dialog（取消）
const emit = defineEmits(['update:show'])
const cancel = () => {
  userForm = reactive({})
  emit('update:show', false)
}

// 关闭dialog（x）
const close = () => {
  ElMessageBox.confirm('Are you sure?').then(() => {
    ElMessage({ type: 'success', message: '操作成功' })
    emit('update:show', false)
  })
}

// 确认(保存)
const add = async ()=>{
  let res = await userAdd(userForm)
  // if( res.code =='200' ) ElMessage({type:'success',message:'修改成功'})

}
const update = async ()=>{
  let res = await userUpdate(userForm)
  if( res.code =='200' ) ElMessage({type:'success',message:'修改成功'})

}
const onSubmit = async () => {
  if( updateRow.value ){
        await update();
    }else{
        await add();
    }
    show.value = false
    emit('change')
    userForm = reactive({})
}
</script>

<style lang="scss" scoped>
.user-editor-form {
  :deep(.inline) {
    display: inline-flex;
    vertical-align: middle;
    width: 50%;
  }

  .treeList {
    padding: 2px;
    width: 100%;
  }
}

</style>
